<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 18px;
        }

        #app {
            padding: 10px 20px;
        }

        .query {
            margin: 10px 0;
        }

        .box {
            display: flex;
        }

        textarea {
            width: 300px;
            height: 160px;
            font-size: 18px;
            border: 1px solid #dedede;
            outline: none;
            resize: none;
            padding: 10px;
        }

        textarea:hover {
            border: 1px solid #1589f5;
        }

        .transbox {
            width: 300px;
            height: 160px;
            background-color: #f0f0f0;
            padding: 10px;
            border: none;
        }

        .tip-box {
            width: 300px;
            height: 25px;
            line-height: 25px;
            display: flex;
        }

        .tip-box span {
            flex: 1;
            text-align: center;
        }

        .query span {
            font-size: 18px;
        }

        .input-wrap {
            position: relative;
        }

        .input-wrap span {
            position: absolute;
            right: 15px;
            bottom: 15px;
            font-size: 12px;
        }

        .input-wrap i {
            font-size: 20px;
            font-style: normal;
        }

        .query {
            display: inline-block;
            margin: 10px;
        }

        select {
            width: 100px;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 条件选择框 -->
    <div class="query">
        <span>源语言：</span>
        <select v-model="obj.from">
            <option value="en">英语</option>
            <option value="zh">简体中文</option>
            <option value="jp">日语</option>
            <option value="fra">法语</option>
        </select>
    </div>
    <div class="query">
        <span>目标语言：</span>
        <select v-model="obj.to">
            <option value="zh">简体中文</option>
            <option value="en">英语</option>
            <option value="jp">日语</option>
            <option value="fra">法语</option>
        </select>
    </div>

    <!-- 翻译框 -->
    <div class="box">
        <div class="input-wrap">
            <textarea v-model="obj.q"></textarea>
            <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
            <div class="transbox">
                {{result}}
            </div>
        </div>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script>
    // 接口地址：http://www.itcbc.com:3006/api/translate
    // 请求方式：get
    // 请求参数：
    // （1）q：   需要被翻译的文本（必传）
    // （2）from：源语言（可选），默认-英语
    // （3）to：  需要被翻译成的语言（可选）默认值-中文
    // -----------------------------------------------

    const app = new Vue({
        el: '#app',
        data:{
            obj:{
                from:'',
                to:'',
                q:''
            },
            timer:'',
            result:''
        },
        watch:{
          obj:{
              async handler(newVal){
                  if(newVal.q === ''){
                      this.result = '';
                      return
                  }
                  // 清楚定时器
                  clearTimeout(this.timer)
                  this.timer = setTimeout(async()=>{
                      // 从返回的对象里取出data字段代表的对象并赋值给res
                      const {data:res} = await axios({
                          method:'get',
                          url:"http://www.itcbc.com:3306/api/translate",
                          params:newVal
                      })
                      this.result = res.trans_result[0].dst
                  }, 500)
              },
              // 深度监听,对象中的任意属性变化都会执行
              deep: true
          }
        }
    })
</script>
</body>

</html>